<template>
    <div id="shopContainer">
        <InputCom @add="handleAdd"/>
        <List :data='arr' @del="handleDelete"/>
    </div>
</template>
<script>
import InputCom from "./InputCom.vue"
import List from "./List.vue"

export default{
    data(){
        return{
             arr: [
                    {
                        id: 1,
                        code: 1,
                        imgSrc: "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
                        productName: "坤坤的背带裤",
                        price: 9.9,
                        total: 9.9,
                        count: 1
                    },
                    {
                        id: 2,
                        code: 2,
                        imgSrc: "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
                        productName: "品如的衣服",
                        price: 19.9,
                        total: 19.9,
                        count: 1
                    },
                    {
                        id: 3,
                        code: 3,
                        imgSrc: "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
                        productName: "秀儿的秋裤",
                        price: -9.9,
                        total: -9.9,
                        count: 1
                    },
                ]
        }
    },
    components:{
        InputCom,
        List
    },
    methods:{
        handleAdd(input){
            console.log(1);
            this.arr.push(input)
        },
        handleDelete(id){
            this.arr=this.arr.filter(item => item.id !== id)
        }
    }
}
</script>
<style>
    #app {
    width: 600px;
    margin: 10px auto;
    }

    .tb {
    border-collapse: collapse;
    width: 100%;
    }

    .tb th {
    background-color: #0094ff;
    color: white;
    }

    .tb td,
    .tb th {
    padding: 5px;
    border: 1px solid black;
    text-align: center;
    }

    .add {
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 10px;
    }
</style>